<template>
    <div class="container-detail">
           <div class="header">
           <el-button class="link" type="primary">
                <router-link to="/" style="color: #fff;">返回</router-link>
           </el-button>
       </div>
       <div class="main">
           <div class="list">
                <div class="title">投票主题详情</div>
                <div class="item">
                    <div class="item-key">投票ID:</div>
                    <div class="item-value">{{ info.voteId }}</div>
                </div>
                <div class="item">
                    <div class="item-key">投票主题:</div>
                    <div class="item-value">{{ info.voteTitle }}</div>
                </div>
                <div class="item">
                    <div class="item-key">创建者:</div>
                    <div class="item-value">{{ info.creator }}</div>
                </div>
                <div class="item">
                    <div class="item-key">投票代币名称:</div>
                    <div class="item-value">{{ info.voteAssetCode }}</div>
                </div>
                <div class="item">
                    <div class="item-key">已领取数量:</div>
                    <div class="item-value">{{ info.turnout }}</div>
                </div>
                <div class="item">
                    <div class="item-key">已投票数量:</div>
                    <div class="item-value">{{ info.obtained }}</div>
                </div>
                <div class="item">
                    <div class="item-key">投票开始时间:</div>
                    <div class="item-value">{{ info.voteStartTime }}</div>
                </div>
                <div class="item">
                    <div class="item-key">投票截止时间:</div>
                    <div class="item-value">{{ info.voteEndTime }}</div>
                </div>
                <div class="item">
                    <div class="item-key">状态:</div>
                    <div class="item-value">{{ info.voteStatus | formatStatus }}</div>
                </div>
                <div class="item">
                    <div class="item-key">主题背景:</div>
                    <div class="item-value" >{{ info.voteIntroduction }}</div>
                </div>
                <div class="item">
                    <div class="item-key">主题浏览量:</div>
                    <div class="item-value">{{ info.totalBrowsing }}</div>
                </div>
                <div class="item">
                    <div class="item-key">主题类别:</div>
                    <div class="item-value">{{ info.voteCategoryValue }}</div>
                </div>
                <div class="item">
                    <div class="item-key">主题属性:</div>
                    <div class="item-value">{{ info.voteOptionType == 1 ? '简单投票':'图片投票'}}</div>
                </div>
                <div class="title">投票选项信息</div>
                <div class="table_con">
                    <el-table  :data="tableData"  style="width: 100%; text-align:center"  :border='true'>
                        <el-table-column  prop="optionContent"    label="选项名称" ></el-table-column>
                        <el-table-column  prop="optionIntroduction"   label="选项介绍">
                        </el-table-column>
                        <el-table-column  prop="optionCoverUrl"   label="图片">
                            <template slot-scope="scope">
                                <div class="pic" v-if="scope.row.optionCoverUrl == '' ? show ='true':show='false'" v-show="show" ><img style="width:80px; height:80px; border-radius:0;" :src="scope.row.optionCoverUrl" alt=""></div>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="turnout" label="投票人数"></el-table-column>
                        <el-table-column  prop="proportion" label="总票数占比" ></el-table-column>
                        <el-table-column  prop="optionAddress" label="区块链地址" ></el-table-column>
                    </el-table>
                </div>
                
            </div>
           </div>
       </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");

export default {
    data() {
        return {
           voteId:'',
           info:'',
           tableData:[],
           item:{},
           userCore:{},
           optionCoverUrl:'',
        //    show:'',
        }
    },
    mounted() {
        this.voteId  = this.$router.currentRoute.query.id;
        this.getDetail(); 
       // this.getTransferRecord();
    },
    methods: {
        getDetail(){
           let url = CONSTANT.URL.VOTE.FINDVOTEDETAIL;
           let param = {
               voteId:this.voteId
           } ;
           common.requestAjax(url,param,null,(res)=>{
                let data = res.data.bussData;
                this.info = res.data.bussData;
                this.tableData = this.info.voteOptionList;
                // console.log('tableData:',this.tableData);
                // this.item = this.tableData[0];
           }) 
        },  
    },
    filters:{
        formatStatus(value){
            var status = [];
                    status['NOTSTARTED'] = '未开始';
                    status['ONGOING'] = '进行中';
                    status['FINISHED'] = '已结束';
                    if(value){
                        return status[value];
                    }
                    else{ return '--'};
        },
    }
}
</script>

<style lang="scss" scoped>
    .container-detail {
        .header{
            height: 46px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dedede;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
                margin-right: 5%
            }
        }
        .main {
            margin: 20px 0 0 0px;
            clear: both;
            .list{
                .title{
                    padding-left: 20px;
                    height: 40px;
                    line-height: 40px;
                    background-color: #f5f5f5;
                    border: 1px solid #dedede;
                    font-weight: 600;
                }
                .noborder-top{
                    border-top:none;
                }
                .item{
                    // height: 40px;
                    border: 1px solid #dedede;
                    border-top:none;
                    display: flex;
                    .item-key{
                        // float: left;
                        // display: flex;
                        width: 120px;
                        padding-left: 20px;
                        padding-right: 10px;
                        // height: 40px;
                        // line-height: 40px;
                        text-align: right;
                        border-right: 1px solid #dedede;
                        padding-top: 15px;
                        padding-bottom: 15px;
                    }
                    .item-value{
                        padding-top: 15px;
                        padding-bottom: 15px;
                        padding-right: 10px;
                        // width: auto;
                        flex: 1;
                        // height: 40px;
                        max-height: 200px;
                        // line-height: 40px;
                        padding-left: 20px;
                        // float: left;
                        
                        section{
                            display: inline-block;
                            height: 40px;
                            // img{
                            //     height: 50px;
                            //     width: 50px;
                            //     margin-top: 2px;
                            //     border-radius: 50%;
                            // }
                        }
                    }
                    
                }
                // .item-pic{
                //     height: 120px;
                //     .item-key{
                //         height: 120px;
                //     }
                //     .item-value{
                //         padding-left:0;
                //         height: 120px;
                //         section{
                //             width: 110px;
                //             padding:10px 20px;
                //             text-align: center;
                //             float: left;
                //             height: 100px;
                //             overflow: hidden;
                //             text-align: center;
                //             img{
                //                 height: 100px;
                //                 width: auto;
                //                 display: inline-block;
                //             }
                //         }
                        
                //     }
                // }
            }
        }
    }
</style>
